import { Button, Table, Tag, notification } from 'antd'
import axios from 'axios'
import React, { useEffect, useState } from 'react'

function AuditList(props) {
  const { username } = JSON.parse(localStorage.getItem("token"));
  const [dataSource, setdataSource] = useState([])
  useEffect(() => {
    /**
     * jaon-server独有的判断符
     * auditState_ne=0表示：auditState !== 0
     * publishState_lte=1表示：publishState <= 1
     */
    axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then((res) => {
      setdataSource(res.data)
    })
  }, [username])

  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`} > {title}</a >
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: '审核状态',
      dataIndex: 'auditState',
      render: (auditState) => {
        const colorList = ["orange", "skyblue", "green", "red"]
        const auditList = ["草稿箱中", "审核中", "已通过", "未通过"];
        return <Tag
          color={colorList[auditState]}
        >{auditList[auditState]}</Tag>
      }
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          {
            item.auditState === 1 && <Button
              type='default'
              style={{ margin: "0px 10px" }}
              onClick={()=>{
                handleRervert(item)
              }}
            >撤销</Button>
          }
          {
            item.auditState === 2 && <Button
              danger
              style={{ margin: "0px 10px" }}
              onClick={()=>{
                handlePublish(item)
              }}
            >发布</Button>
          }
          {
            item.auditState === 3 && <Button
              type='primary'
              style={{ margin: "0px 10px" }}
              onClick={()=>{
                props.history.push(`/news-manage/update/${item.id}`)
              }}
            >修改</Button>
          }
        </div>
      }
    }
  ];

  const handleRervert = (item)=>{
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.patch(`/news/${item.id}`,{
      "auditState":0
    }).then((res)=>{
      notification.info({
        message:"通知",
        description:`您可以到草稿箱中查看您撤销新闻`,
        placement:"bottomRight"
      })
    })
  }

  const handlePublish = (item)=>{
    axios.patch(`/news/${item.id}`,{
      "publishState":2,
      "publishTime":Date.now()
    }).then((res)=>{
      props.history.push(`/publish-manage/published`)
      notification.info({
        message:"通知",
        description:`您可以到【发布管理/已发布】中查看您撤销新闻`,
        placement:"bottomRight"
      })
    })
  }

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5
        }}
        rowKey={item => item.id}
      />
    </div>
  )
}

export default AuditList